事件修饰符

Vue 为  v-on  提供了事件修饰符。修饰符是用  .  表示的指令后缀，包含以下这些：

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

<!-- 单击事件将停止冒泡 event.stopPropagation -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 阻止默认行为 event.preventDefault -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 写好几个 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素（可能是冒泡上来的） -->
<div @click.self="doThat">...</div>

<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<!-- 使事件触发从包含这个元素的顶层开始往下触发 -->
<div @click.capture="doThis">...</div>

<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

在移动端，当我们在监听元素滚动事件的时候，会一直触发 onscroll 事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给 onscroll 事件整了一个 .lazy 修饰符

按键修饰符

鼠标按钮修饰符针对的就是左键、右键、中键点击，有如下：

• .left
• .right
• .middle

这些修饰符将处理程序限定为由特定鼠标按键触发的事件。

键盘修饰符

键盘修饰符是用来修饰键盘事件（ onkeyup ， onkeydown ）的，有如下：

keyCode 存在很多，但 vue 为我们提供了别名，分为以下两种：

• 普通键（enter、tab、delete、space、esc、up...）
• 系统修饰键（ctrl、alt、meta、shift...）

.exact  修饰符允许精确控制触发事件所需的系统修饰符的组合。

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>